<template>
	<view class="wrap">
		<image src="/static/r-t.png" class="rt" mode=""></image>
		<image src="/static/l-b.png" class="lb" mode=""></image>
		<image src="../../static/logo.png" class="logo" mode=""></image>
		<text class="title">Hi,欢迎使用安恒理财</text>
		<view class="from">
			<view class="from-item">
			<!-- 	<text class="area" @click="bindAreaCode">{{loginUser.countryNo}}</text> -->
				<input type="number" v-model="loginUser.mobile" placeholder="请输入手机号" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="password" v-model="loginUser.password" placeholder="请输入8到18位字母+数字密码"
					placeholder-class="phl" />
			</view>
			<button class="submit" @click="bindSubmit">登录</button>
			<view class="other">
				<text @click="loginForPassword">验证码登录</text>
				<text @click="register">注册</text>
			</view>
			<view class="footer-tips" @click="isState = !isState">
				<image :src="isState?'/static/radio-act.png':'/static/radio.png'" class="radio" mode=""></image>
				<text>同意</text>
				<text style="color: #0265FF;" @click.stop="toWEBYS">用户协议</text>
				<text>和</text>
				<text style="color: #0265FF;" @click.stop="toWEBYH">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userLogin
	} from '@/util/api.js'
	import {
		ref
	} from "vue";
	const loginUser = ref({
		mobile: "",
		password: "",
		countryNo: "+86",
		loginType: 0
	})
	const isState = ref(true)
	uni.$on('onSelectAreaCode', (code) => {

		loginUser.value.countryNo = code
	})
	const toWEBYH = (url) => {
		uni.navigateTo({
			url: "/pages/webviewXy/webviewXy"
		})
	}
	const toWEBYS = (url) => {
		uni.navigateTo({
			url: "/pages/webviewYS/webviewYS"
		})
	}
	const loginForPassword = () => {
		uni.navigateTo({
			url: "/pages/loginForCode/loginForCode"
		})
	}
	const register = () => {
		uni.navigateTo({
			url: "/pages/register/register"
		})
	}
	const bindSubmit = async () => {
		if (isState.value == false) {
			uni.showModal({
				title: "提示",
				content: "请同意用户协议和隐私政策",
				showCancel: false
			})
			return false
		}
		if (!loginUser.value.mobile) {
			uni.showModal({
				title: "提示",
				content: "请输入手机号",
				showCancel: false
			})
			return false
		}
		if (!loginUser.value.password) {
			uni.showModal({
				title: "提示",
				content: "请输入密码",
				showCancel: false
			})
			return false
		}
		uni.showLoading({
			mask:true
		})
		const result = await userLogin(loginUser.value)
		uni.hideLoading()
		if (result.code == 200) {
			uni.setStorageSync('token', result.data.token)
			uni.setStorageSync('tokenHead', result.data.tokenHead)
			uni.reLaunch({
				url: "/pages/index/index"
			})
		}

	}
	const bindAreaCode = () => {
		uni.navigateTo({
			url: "/pages/areaCode/areaCode"
		})
	}
</script>

<style lang="scss">
	.from {
		padding: 0 38rpx;

		.other {
			display: flex;
			justify-content: space-between;

			text {
				display: block;
				color: #0265FF;
				font-size: 28rpx;
				font-weight: 800;
			}
		}

		.from-item {
			width: 519rpx;
			height: 100rpx;
			background: #F6F6FF;
			border-radius: 71rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;
			padding: 0 77rpx;

			.phl {
				color: #999;
				font-size: 28rpx;
			}

			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.code {
				font-weight: bold;
				display: block;

				color: #333333;
				font-size: 28rpx;
			}
		}

		.submit {
			width: 673rpx;
			height: 100rpx;
			background: #0265FF;
			box-shadow: 0px 12rpx 23rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 71rpx;
			margin: 77rpx auto 38rpx;
			border: none;
			color: #fff;
			font-weight: 800;
			font-size: 38rpx;
			line-height: 100rpx;
		}

		.footer-tips {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 238rpx;

			.radio {
				width: 27rpx;
				height: 27rpx;
				display: block;
				margin-right: 16rpx;
			}

			text {
				font-size: 27rpx;
				color: #999;
			}
		}
	}

	.title {
		color: #333;
		font-size: 36rpx;
		font-weight: 800rpx;
		display: block;
		text-align: center;
		margin-bottom: 77rpx;
	}

	.wrap {
		overflow: hidden;
	}

	.logo {
		width: 169rpx;
		height: 169rpx;
		display: block;
		margin: 240rpx auto 38rpx;
	}

	.rt {
		position: absolute;
		width: 156rpx;
		height: 313rpx;
		right: 0;
		top: 65rpx;
	}

	.lb {
		position: absolute;
		width: 327rpx;
		height: 313rpx;
		bottom: 0;
		left: 0;
	}
</style>